<template>
  <BasicModal
    :title="modalTitle"
    :width="['zh_CN'].includes(unref(getLocale)) ? 820 : 1000"
    :okText="$t('common.confirmSave')"
    @register="registerSendLetterModal"
    :cancelText="$t('common.cancelText')"
    @ok="submitFunc"
    :showCancelBtn="modelType == 'FrontPage'"
    :showOkBtn="false"
  >
    <BasicForm
      @register="registerSports"
      :schemas="marqueeFormData(contentList, currentlanguageIndex, modelType)"
    >
      <template #titleTextSlot>
        <FormItemRest>
          <div class="flex">
            <Input
              v-model:value="currentLang.transitionValueTitle"
              :placeholder="t('modalForm.system.system_input_title_tip')"
              @blur="blurTitle"
              :disabled="modelType == 'FrontPage' ? false : true"
              size="large"
            />
            <Button
              size="large"
              :disabled="modelType == 'FrontPage' ? false : true"
              class="m-l-5"
              @click="moreLangurageModal"
              type="primary"
            >
              {{ t('v.discount.activity.more_language') }}
            </Button>
          </div>
        </FormItemRest>
      </template>
      <template #content>
        <LangRadioGroup
          :showTranslation="modelType == 'FrontPage' ? true : false"
          :contentList="contentList"
          @click:radio="handlelanguageLevel"
          @click:translation="handleClickTranslation"
        />
      </template>
    </BasicForm>
    <template #appendFooter>
      <Button
        type="primary"
        :disabled="submiting"
        v-if="!submiting && modelType == 'FrontPage'"
        @click="submitFunc()"
        class="!mr-2"
        >{{ $t('common.confirmSave') }}
      </Button>
    </template>
    <buttonTextModal @register="textModal" @emits-values="emitsValues" />
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, unref } from 'vue';
  import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form';
  import { marqueeFormData } from './SendLetterModal.data';
  import { useFormSetting } from '/@/hooks/setting/useFormSetting';
  import LangRadioGroup from '../../common/components/LangRadioGroup.vue';
  import { useLocalList } from '/@/settings/localeSetting';
  import { inserStationInfo } from '/@/api/sys';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { transform } from 'lodash-es';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { FormItemRest, Input, Button, message } from 'ant-design-vue';
  import translateContentList from '/@/views/common/language';
  import buttonTextModal from '/@/components/buttonTextModal/buttonTextModal.vue';
  import { useLocale } from '@/locales/useLocale';

  const localeList = useLocalList();
  const { t } = useI18n();
  interface LangItem {
    label: string; // 多语言描述
    value: string | number; // 多语言key
    transitionValue: string; // 多语言文本
    image_url: string; // 多语言图片地址
    language: string; // 多语言类型
    file?: FileReader; // file文件
    transitionValueTitle: String;
  }
  const emit = defineEmits(['success']);
  const modalTitle = ref<any>(t('table.system.system_send_message')); //发送站内信
  const { createMessage } = useMessage();
  const FORM_SIZE = useFormSetting().getFormSize;
  const extraList = [
    {
      label: t('business.common_original'), //翻译原文
      value: 'default',
      transitionValue: '',
      transitionValueTitle: '',
      image_url: '',
      language: 'original',
    },
  ];
  const langList = localeList.map((item) => {
    return {
      label: t('common.common_' + item.event),
      value: item.event,
      transitionValue: '',
      image_url: '',
      transitionValueTitle: '',
      language: item.language || '',
    };
  });
  const { getLocale } = useLocale();
  const currentlanguageIndex = ref(0); // 当前
  const contentList = ref<Array<LangItem>>([...extraList, ...langList]);
  const modelType = ref('FrontPage' as string);
  const currentLang = ref(contentList.value[0]); // 当前语言公告内容
  const [registerSports, { setFieldsValue, validate, resetFields }] = useForm({
    showActionButtonGroup: false,
    size: FORM_SIZE,
  });

  const [registerSendLetterModal, { closeModal }] = useModalInner(async (data) => {
    try {
      data.centent = JSON.parse(data.msg);
    } catch (e) {
      console.log('e', e);
      data.centent = '';
    }
    console.log(111, data);
    if (data.type === 'FrontPage') {
      modalTitle.value = t('table.system.system_send_message'); //站内信详情
    }
    if (data.type == 'content') {
      modalTitle.value = t('table.system.system_message_send_detail'); //站内信详情
      let copyValue = JSON.parse(JSON.stringify(data));
      const content = copyValue.centent;
      console.log(1112, copyValue, content);
      contentList.value.forEach((el) => {
        el.transitionValue = content[el.value];
        console.log(copyValue.title);
        console.log(el.value);
        el.transitionValueTitle = copyValue.title[el.value];
      });
      copyValue.contentEdit = contentList.value[currentlanguageIndex.value].transitionValue;
      console.log(contentList);
      contentList.value[currentlanguageIndex.value];
      await setFieldsValue({ ...copyValue, title: copyValue.title['default'] });
    } else {
      contentList.value.forEach((el) => {
        el.transitionValue = '';
        el.transitionValueTitle = '';
      });
      resetFields();
    }
    modelType.value = data.type;
  });
  const [textModal, { openModal }] = useModal();
  function moreLangurageModal() {
    const title = transform(
      contentList.value,
      function (result, item, key) {
        result[item.value] = item.transitionValueTitle;
      },
      {},
    );
    console.log(11123, contentList.value, title);
    openModal(true, { data: title });
  }
  function emitsValues(value) {
    value.default =
      value.zh_CN || value.en_US || value.th_TH || value.pt_BR || value.hi_IN || value.vi_VN;
    contentList.value = contentList.value.map((item) => {
      return {
        ...item,
        transitionValueTitle: value[item.value],
      };
    });
    currentLang.value = contentList.value[currentlanguageIndex.value];
    console.log(1112434, contentList.value, value);
  }
  const handlelanguageLevel = (value, el) => {
    console.log(el);

    currentlanguageIndex.value = value;
    currentLang.value = contentList.value[currentlanguageIndex.value];
    setFieldsValue({
      contentEdit: el.transitionValue || null,
    });
  };
  function handleClickTranslation() {
    console.log(contentList.value[0].transitionValue);
    if (!contentList.value[0].transitionValue) {
      message.error(t('v.bannner.origin_transitionValue'));
      return;
    } else if (!contentList.value[0].transitionValueTitle) {
      message.error(t('table.system.system_p_enter_mes_title'));
      return;
    }
    //console.log(contentList.value[0].transitionValueTitle);
    translateContentList(
      contentList.value,
      contentList.value[0].transitionValue,
      0,
      'transitionValue',
    ).then((res) => {
      console.log(res);
      if (res.success) {
        message.success(t('v.bannner.transitionValue_success'));
      } else {
        message.error(t('v.bannner.transitionValue_error'));
      }
    });
    handleBtnTextBlur('transitionValueTitle');
  }
  function validateTransitionValues(extraList, type) {
    let nonDefaultItems = extraList.filter((item) => item.value !== 'default');
    let allTransitionValuesEmpty = nonDefaultItems.every((item) => item[type] === '');
    return allTransitionValuesEmpty;
  }
  function handleBtnTextBlur(type) {
    translateContentList(
      contentList.value,
      currentLang.value[type],
      currentlanguageIndex.value,
      type,
    );
  }
  const submiting = ref(false);
  async function submitFunc(): Promise<void> {
    submiting.value = true;
    try {
      setTimeout(() => {
        submiting.value = false;
      }, 1311);
      const values = await validate();

      let istransitionValue = validateTransitionValues(contentList.value, 'transitionValue');
      if (istransitionValue) {
        createMessage.error(t('table.system.system_p_enter_mes'));
        submiting.value = false;
        return false;
      }
      if (!currentLang.value.transitionValueTitle) {
        submiting.value = false;
        message.error(t('table.system.system_p_announce_title1'));
        return;
      }

      if (values.usernames) {
        values['usernames'] = values.usernames
          ? values.usernames.split(' ').join('').split(',')
          : [];
      } else if (values.user_levels) {
        values['user_levels'] = values.user_levels
          ? values.user_levels.map((level) => Number(level))
          : [];
      } else if (values.vip_levels) {
        values['vip_levels'] = values.vip_levels
          ? values.vip_levels.map((level) => Number(level))
          : [];
      } else if (values.agents) {
        values['agents'] = values.agents ? values.agents.split(' ').join('').split(',') : [];
      }
      if (values.flags == 1) values['all'] = 1;
      if (values.flags == 5) values['agent'] = 1;
      const content = await transform(
        contentList.value,
        function (result, item, key) {
          result[item.value] = item.transitionValue;
        },
        {},
      );
      const title = await transform(
        contentList.value,
        function (result, item, key) {
          result[item.value] = item.transitionValueTitle;
        },
        {},
      );
      // console.log(111, title);
      const params = {
        ...values,
        content: JSON.stringify(content),
        title: JSON.stringify(title),
      };
      delete params.contentEdit;
      const { status, data } = await inserStationInfo({ ...params });
      if (status) {
        createMessage.success(data);
        closeModal();
        submiting.value = false;
        emit('success');
      } else {
        createMessage.error(data);
      }
    } catch (e) {
      console.log(e);
    }
  }
  function blurTitle() {
    handleBtnTextBlur('transitionValueTitle');
  }
</script>
